<template>
	<view class="th-message-view" :class="[showLine==true?'bb ':'',]"
		:style="{'padding-left':paddingX,'padding-top':paddingY+'rpx','padding-right':paddingX,'padding-bottom':paddingY+'rpx'}">
		<view v-if="showRadio" class="th-message-radio"></view>
		<view class="th-message-title" :class="textAlign=='center'?'th-message-right':'th-message-left'"
			:style="{ color: titleColor, 'width':titleWidth, 'font-size': size + 'rpx' }">{{title}}</view>
		<slot v-if="type == 'custom'" name="body" />
		<view v-else @click="clickView" class="th-message-detail"
			:class="{'ellipsis':ellipsis,'th-message-right':textAlign=='end','th-message-left':textAlign!='end'}"
			:style="{ color: detailColor, 'font-size': size + 'rpx' }">{{$api.delEmpty(detail)}}</view>
	</view>
</template>

<script>
	export default {
		name: 'th-message-view',
		props: {
			title: {
				type: [String, Number],
				default: ''
			},
			detail: {
				type: [String, Number],
				default: ''
			},
			showRadio: {
				type: Boolean,
				default: false
			},
			textAlign: {
				type: String,
				default: 'end' //center/end/left
			},
			size: {
				type: [Number, String],
				default: 26
			},
			titleColor: {
				type: String,
				default: '#999'
			},
			detailColor: {
				type: String,
				default: '#333'
			},
			titleWidth: {
				type: String,
				default: '140rpx'
			},
			ellipsis: {
				type: Boolean,
				default: false,
			},
			showLine: {
				type: Boolean,
				default: false
			},
			paddingY: {
				type: [Number, String],
				default: 30
			},
			paddingX: {
				type: [Number, String],
				default: 0
			},
			type: {
				type: String,
				default: ""
			}
		},
		data() {
			return {

			};
		},

		methods: {
			clickView() {
				this.$emit('click', {});
			},
		}


	}
</script>

<style lang="scss">
	.th-message-view {
		display: flex;
		align-items:center;
	}

	.th-message-view .th-message-radio {
		width: 8rpx;
		height: 8rpx;
		background-color: #333;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}

	.th-message-view .th-message-title {
		line-height: 1;
	}

	.th-message-view .th-message-detail {
		flex: 1;
		word-break: break-all;
		line-height: 1;
	}

	.th-message-left {
		text-align: left;
	}

	.th-message-right {
		text-align: right;
	}

	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}
</style>
